<!--
 * @Author: your name
 * @Date: 2021-02-05 14:52:13
 * @LastEditTime: 2021-11-30 18:49:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\views\layoutpages\system\Roles.vue
-->
<template>
  <div class="ve_container">
    <div class="echart" id="mychart" style="height: 1000px"></div>
  </div>
</template>


<script setup>
import axios from "../../../plugins/https";
import * as echarts from "echarts";
import ecStat from "echarts-stat";

import {
  reactive,
  toRefs,
  computed,
  ref,
  onMounted,
  getCurrentInstance,
} from "vue";
const { proxy } = getCurrentInstance();
// const route = useRoute();
// const router = useRouter();
// const store = useStore();
// const menuList = computed(() => store.getters.menuList).value;

// const rowData = ref(null);
// const dialogTitle = ref("");
// const showDialog = ref(false);

// const queryForm = ref(null);
// const tableData = ref([]);

onMounted(() => {
  initEcharts();
});

let initEcharts = async () => {
  let dataBJ = [];
  let dataGZ = [];
  let dataDLX = [];
  let dataLX = [];
  proxy.$axos.defaults.baseURL = "/apl/"; // api 即上面 vue.config.js 中配置的地址
  await proxy.$axos.get("/toys/stzb/view/data/0").then((res) => {
    console.log(res, "res");
    res.data.forEach((res1) => {
      dataBJ.push(res1);
    });
  });
  await proxy.$axos.get("/toys/stzb/view/data/1").then((res) => {
    res.data.forEach((res1) => {
      dataLX.push(res1);
    });
  });
  await proxy.$axos.get("/toys/stzb/view/data/2").then((res) => {
    res.data.forEach((res1) => {
      dataGZ.push(res1);
    });
  });
  await proxy.$axos.get("/toys/stzb/view/data/3").then((res) => {
    res.data.forEach((res1) => {
      dataDLX.push(res1);
    });
  });
  // axios.get('http://links.iiiii.run:8889/toys/stzb/view').then(res=>{
  //       console.log(res,"res")
  //   })
  var chartDom = document.getElementById("mychart");
  var myChart = echarts.init(chartDom);
  let option;
  // const dataSH = [
  //   [1, 91, 45, 125, 0.82, 34, 23, '良'],

  // ];
  option = {
    title: {
      text: "凉州战略地图",
      subtext: "Power by 太初集团",
    },

    tooltip: {
      // trigger: 'axis',
      showDelay: 0,
      formatter: function (params) {
        if (params.value.length > 1) {
          return (
            params.value[2] +
            " :<br/>" +
            "x " +
            params.value[0] +
            "y " +
            params.value[1]
          );
        } else {
          return (
            params.seriesName +
            " :<br/>" +
            params.name +
            " : " +
            params.value +
            "kg "
          );
        }
      },
      // axisPointer: {
      //     show: true,
      //     type: 'cross',
      //     lineStyle: {
      //         type: 'dashed',
      //         width: 1
      //     }
      // }
    },

    xAxis: [
      {
        show: false,
      },
    ],
    yAxis: [
      {
        show: false,
      },
    ],
    series: [
      {
        name: "敌对势力",
        type: "scatter",
        emphasis: {
          focus: "series",
        },
        // prettier-ignore

        data: dataGZ,
        itemStyle: {
          color: "red", // 设置点的颜色为蓝色
        },
      },
      {
        name: "敌对势力",
        type: "scatter",
        emphasis: {
          focus: "series",
        },
        // prettier-ignore

        data: dataLX,
        itemStyle: {
          color: "gray", // 设置点的颜色为gray
        },
      },
      {
        name: "敌对势力",
        type: "scatter",
        emphasis: {
          focus: "series",
        },
        // prettier-ignore

        data: dataDLX,
        itemStyle: {
          color: "chocolate", // 设置点的颜色为gray
        },
      },

      {
        name: "我方势力",
        type: "scatter",
        emphasis: {
          focus: "series",
        },
        data: dataBJ,
        itemStyle: {
          color: "blue", // 设置点的颜色为蓝色
        },
        markPoint: {
          symbol: "pin", // 设置标记点的图形
          symbolSize: 10,
          data: [
            {
              coord: [211, 195],
              name: "武威",
              value: "武威8",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [272, 136],
              name: "姑藏",
              value: "姑藏7",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [352, 157],
              name: "休屠",
              value: "休屠4",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [392, 81],
              name: "租厉",
              value: "租厉4",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [412, 181],
              name: "允街",
              value: "允街3",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [71, 76],
              name: "敦煌",
              value: "敦煌6",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [71, 136],
              name: "龙勒",
              value: "龙勒5",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [150, 74],
              name: "闽安",
              value: "闽安3",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [171, 116],
              name: "福禄",
              value: "福禄6",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [72, 304],
              name: "玉门",
              value: "玉门5",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [130, 195],
              name: "乐涫",
              value: "乐涫3",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [45, 362],
              name: "居延",
              value: "居延7",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [111, 395],
              name: "左骑",
              value: "左骑5",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [185, 307],
              name: "张夜",
              value: "张夜7",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [131, 275],
              name: "屋兰",
              value: "屋兰4",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [231, 374],
              name: "山丹",
              value: "山丹3",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [352, 356],
              name: "金城",
              value: "金城6",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [372, 414],
              name: "枝阳",
              value: "枝阳5",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [292, 395],
              name: "榆中",
              value: "榆中4",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [331, 275],
              name: "令居",
              value: "令居3",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [459, 100],
              name: "西平",
              value: "西平6",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [480, 79],
              name: "临羌",
              value: "临羌5",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
            {
              coord: [54, 501],
              name: "汪陶",
              value: "汪陶7",
              symbol: "circle",
              symbolSize: 10,
              label: {
                show: true,
                position: "top",
                color: "#5a1216",
              },
              itemStyle: {
                color: "green",
                borderColor: "#fed71a",
                borderWidth: 2,
              },
            },
          ],
        },
      },
    ],
  };

  option && myChart.setOption(option);
};
</script>



<style lang="scss" scoped></style>
